<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
  <style>
    * {
      margin: 0;
      padding: 0;
      color: aliceblue;
    }
    .box {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      height: 100vh;
      background-image: url('./assets/one/one-bg.png');
    }
    .left {
        width: 500px;
        height: 100%;
        margin-top: 130px;
        margin-left: 20px;
        order: 1;
        background-image: url('./assets/one/one-left-img.png');
        background-repeat: no-repeat;
    }
    .center {
        flex: 1;
        order: 2;
    }
    .right {
        width: 500px;
        height: 100%;
        margin-top: 130px;
        margin-right: 20px;
        order: 3;
        background-image: url('./assets/one/one-right-img.png');
        background-repeat: no-repeat;
        position: relative;
    } 
    .time {
      width: 100%;
      text-align: center;
      position: absolute;
      top: -29px;
      font-size: 18px;
    }
    /*中间区域样式*/
    .container{
      width: 100px;
      height: 100px;
    }
  .liquidArea{
    display: flex;
    justify-content: space-around;
  }
  .liquid{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .liquidTitle{
    font-size: 16px;
    color: #fff;
  }
  .bottomTitle{
    font-size: 20px;
    color: transparent;
    width: 100%;
    margin-bottom: 12px;
    text-align: center;
    background-image: linear-gradient(80deg, #1789fb, #fff);
    -webkit-background-clip: text;
  }
  .bottom{
    position: absolute;
    bottom: 30px;
    left: 570px;
    right: 570px;
  }
  .top{
    position: absolute;
    top: 130px;
    left: 575px;
    right: 520px;
    text-align: center;
    background: url('./assets/one/number.png');
    width: 772px;
    height: 72px;
  }
  .topText{
    position: relative;
    color: rgb(144, 196, 252);
  }
  .topTotal{
    font-size: 20px;
    position: absolute;
    left: 175px;
    line-height: 72px;
    color: rgb(144, 196, 252);
  }
  .topNumber{
    letter-spacing: 29px;
    position: absolute;
    /* left: 275px; */
    right: 165px;
    font-size: 30px;
    font-weight: 800;
    line-height: 72px;
    color: rgb(144, 196, 252);
  }
  .topUnit{
    position: absolute;
    top: 35px;
    font-size: 21px;
    left: 593px;
    color: rgb(144, 196, 252);
  }
  .center-map {
    position: absolute;
    top: 148px;
    left: 510px;
    right: 520px;
  }
  #center-map {
    width: 900px;
    height: 750px;
  }
    /*中间区域*/
  </style>
</head>
<body>
  <div class="box">
    <div class="left animate__animated animate__bounceInLeft"></div>
    <div class="center">
      <div class="top">
        <div class="topText">
          <span class="topTotal">企业总数:</span>
          <span class="topNumber" id="num1"></span>
          <span class="topUnit">个</span>
        </div>
      </div>
      <div class="center-map">
        <div id="center-map"></div>
      </div>
      <div class="bottom">
        <div class="bottomTitle">>> 主题库数据 <<</div>
        <div class="liquidArea">
          <div class="liquid">
            <div id="container1" class="container"></div>
            <span class="liquidTitle">区域平台</span>
          </div>
          <div class="liquid">
            <div id="container2" class="container"></div>
            <span class="liquidTitle">碳计算因子</span>
          </div>
          <div class="liquid">
            <div id="container3" class="container"></div>
            <span class="liquidTitle">计算模型</span>
          </div>
          <div class="liquid">
            <div id="container4" class="container"></div>
            <span class="liquidTitle">企业数量</span>
          </div>
          <div class="liquid">
            <div id="container5" class="container"></div>
            <span class="liquidTitle">产品数量</span>
          </div>
          <div class="liquid">
            <div id="container6" class="container"></div>
            <span class="liquidTitle">碳足迹数量</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right animate__animated animate__bounceInRight">
      <div class="time"></div>
    </div>
</div>
<script type="text/javascript" src="./countUp.min.js"></script>
<script type="text/javascript" src="./echart3.8.5.js"></script>
<script type="text/javascript" src="./echarts-liquidfill.js"></script>
<script type="text/javascript" src="./mapData/chinaMap.json"></script>
<script type="text/javascript">
  function initChart(id, text) {
    let dom = document.getElementById(id);
    let myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    let option = {
      zoom:false,
        title: {
            text: '',
        },
        backgroundColor: 'transparent',
        series: [{
            type: 'liquidFill',
            radius: '90%',
            // color: ['#195ba6'],
            color: ['#0351cd'],
            center: ['50%', '50%'],
            data: [0.4544, 0.4544],
            backgroundStyle: {
                borderWidth: 2,
                borderColor: '#1789fb',
                color: '#09255b',
            },
            label: {
              normal: {
                formatter: text,
                  textStyle: {
                      color: '#fff',
                      fontSize: 16,
                      fontWeight: 400
                  }
              }
          },
            outline: {
                itemStyle: {
                    borderWidth: 5,
                    borderColor: '#1789fb',
                    borderType: 'dashed',
                }
            },
        }]
      };
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
  }
  initChart('container1', '1个');
  initChart('container2', '3.67万');
  initChart('container3', '1.27万');
  initChart('container4', '8039个');
  initChart('container5', '4.21万');
  initChart('container6', '1.21万');

  function initMap() {
    let dom = document.getElementById('center-map');
    let myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    echarts.registerMap('china', chinaMap);
    let option = {
      geo: {
        show: true,
        map: 'china',
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false,
            }
        },
        roam: false,
        itemStyle: {
            normal: {
              areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#AAC1E2'
                  },
                  {
                    offset: 0.33,
                    color: '#436AAA'
                  },
                  {
                    offset: 0.66,
                    color: '#2A57A8'
                  },
                  {
                    offset: 1,
                    color: '#143167'
                  }
                ],
                globalCoord: false,
              },
              borderColor: '#3B5077',
            },
            emphasis: {
                areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#AAC1E2'
                  },
                  {
                    offset: 0.33,
                    color: '#436AAA'
                  },
                  {
                    offset: 0.66,
                    color: '#2A57A8'
                  },
                  {
                    offset: 1,
                    color: '#143167'
                  }
                ]
              },
            }
        }
    },
        series: [
          {
              name: '',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbolSize: function(value) {
                  return value[2] / 5;
              },
              zlevel: 6,
              legendHoverLink: true,
              showEffectOn: 'render',
              rippleEffect: {
                  scale: 6,
                  color: function(value) {
                    return value.value[3];
                  },
                  brushType: 'fill'
              },
              tooltip: {
                  show: true,
                  backgroundColor: 'rgba(0,0,0,.6)',
                  borderColor: 'rgba(147, 235, 248, .8)',
                  textStyle: {
                      color: '#FFF'
                  }
              },
              label: {
                  normal: {
                    show: false,
                    formatter: '{b}',
                    fontSize: 12,
                    offset: [0, 2],
                    position: 'bottom',
                    textBorderColor: '#fff',
                    textShadowColor: '#000',
                    textShadowBlur: 10,
                    textBorderWidth: 0,
                    color: '#ffffff',
                  }
              },
              itemStyle: {
                  normal: {
                    color: function(value) {
                      return value.value[3];
                    },
                  },
                  color: '#50E3C2',
                  borderColor: 'rgba(225,255,255,2)',
                  borderWidth: 4,
                  shadowColor: '#E1FFFF',
                  shadowBlur: 10
              },
              data: [
            {
              "name": "国家碳排放基础数据库",
              "value": [116.405285, 39.904989, 40, '#FF3300']
            },
            {
              "name": "辽宁分院",
              "value": [123.429096,41.796767, 50, '#50E3C2']
            },
            {
              "name": "山东分院",
              "value": [117.000923,35.675807, 44, '#50E3C2']
            },
            {
              "name": "江苏分院",
              "value": [120.767413,32.041544, 60, '#50E3C2']
            },
            {
              "name": "安徽分院",
              "value": [112.982279,34.96119, 40, '#50E3C2']
            },
            {
              "name": "重庆分院",
              "value": [106.504962,29.533155, 50, '#50E3C2']
            },
            {
              "name": "福建分院",
              "value": [119.306239,26.075302, 48, '#50E3C2']
            },
            {
              "name": "广东分院",
              "value": [113.280637,23.125178, 54, '#50E3C2']
            },
            {
              "name": "内蒙古分院",
              "value": [111.670801,41.818311, 34, '#50E3C2']
            },
            {
              "name": "青海分院",
              "value": [101.778916,36.623178, 40, '#50E3C2']
            }
          ],
              encode: {
                  value: 2
              }
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              // effect: {
		          //     show: true,
		          //     period: 4, //箭头指向速度，值越小速度越快
		          //     trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
		          //     symbol: 'arrow', //箭头图标
		          //     symbolSize: 10, //图标大小
		          //     color: '#50E3C2', // 图标颜色
		          //   },
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.6,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      fromname: '内蒙古分院',
                      toname: '国家碳排放基础数据库',
                      coords: [
                          [111.670801,41.818311],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.5,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      fromname: '青海分院',
                      toname: '国家碳排放基础数据库',
                      coords: [
                          [101.778916,36.623178],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.7,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      fromname: '国家碳排放基础数据库',
                      toname: '辽宁分院',
                      coords: [
                          [116.405285, 39.904989],
                          [123.429096, 41.796767]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.3,
                  orient: 'horizontal',
                  color: "#5AE510",
                }
              },
              show: true,
              data: [
                  {
                      fromname: '国家碳排放基础数据库',
                      toname: '江苏分院',
                      coords: [
                          [116.405285, 39.904989],
                          [120.767413,32.041544]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'dashed',
                  width: 2,
                  opacity: 1,
                  curveness: 0.7,
                  orient: 'horizontal',
                  color: "#5AE510",
                }
              },
              show: true,
              data: [
                  {
                      toname: '国家碳排放基础数据库',
                      fromname: '山东分院',
                      coords: [
                          [117.000923,35.675807],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'dashed',
                  width: 2,
                  opacity: 1,
                  curveness: 0.3,
                  orient: 'horizontal',
                  color: "#5AE510",
                }
              },
              show: true,
              data: [
                  {
                      toname: '国家碳排放基础数据库',
                      fromname: '安徽分院',
                      coords: [
                          [112.982279,34.96119],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.6,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      toname: '国家碳排放基础数据库',
                      fromname: '重庆分院',
                      coords: [
                          [106.504962,29.533155],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.5,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      toname: '福建分院',
                      fromname: '国家碳排放基础数据库',
                      coords: [
                          [116.405285, 39.904989],
                          [119.306239,26.075302]
                      ]
                  }
              ]
          },
          {
              name: "",
              type: "lines",
              coordinateSystem: 'geo',
              zlevel: 5,
              lineStyle: {
                normal: {
                  type: 'solid',
                  width: 2,
                  opacity: 1,
                  curveness: 0.5,
                  orient: 'horizontal',
                  color: "#50E3C2",
                }
              },
              show: true,
              data: [
                  {
                      fromname: '广东分院',
                      toname: '国家碳排放基础数据库',
                      coords: [
                          [113.280637,23.125178],
                          [116.405285, 39.904989]
                      ]
                  }
              ]
          },
          {
              name: '区域',
              type: 'map',
              map: 'china',
              data: [],
              geoIndex: 0,
              tooltip: {
                  show: false,
              },
              label: {
                  show: false,
              },
              roam: false,
              itemStyle: {
                  borderColor: '#143167',
                  borderWidth: 1,
                  shadowColor: '#436AAA',
                  shadowOffsetX: 2,
                  shadowOffsetY: 4,
                  shadowBlur: 8,
                  normal: {
                    emphasis: {
                      show: false,
                    }
                  }
              }
          }
        ]
    };
    myChart.setOption(option);
  }
  initMap();

  // 创建渲染数字DOM元素
  var NumberOptions = options = {
        useEasing: true, 	 	// 使用缓和
      useGrouping: true,	// 使用分组(是否显示千位分隔符,一般为 true)
      separator: '',		// 分隔器(千位分隔符,默认为',')
      decimal: '.',			// 十进制(小数点符号,默认为 '.')
      prefix: '',			// 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
      suffix: ''			// 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等) 
    };

  new CountUp("num1", 0, 8039, 0, 3, NumberOptions).start();

  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  function zero(params) {
    if (params >= 10) {
      return params
    }else {
      return `0${params}`
    }
  }
    setInterval(() => {
    const curDate = new Date()
    let timeEle = document.querySelector('.time')
    timeEle.innerHTML = `${curDate.getFullYear()}年 ${zero(curDate.getMonth() + 1)}月${curDate.getDate()}日 ${weekDays[curDate.getDay()]} ${zero(curDate.getHours())}:${zero(curDate.getMinutes())}:${zero(curDate.getSeconds())}` 
    }, 1000)
</script>
</body>
</html>